import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

import { Row, Col } from "@preact/grid";
import { TextInput, ColorInput } from "@preact/base/input"; 
import { updateData, getData } from "@store/data";
import { add, envoke, destory } from "@store";
import "@static:css/components/config/rect/index.less";


export default ({uuid = ''}) => {
    let d = getData(uuid, 'rect');
    let [data, setData] = useState({
        ...d,
        uuid
    });
   
    if(uuid){
        useEffect(() => {
            const key = `${uuid}-rect`;
    
            console.log('update key => ', key);
            add(key, 'updateRect', o => {
                updateData(uuid, 'rect', o);
                setData(o);
            })
            d && setData(d);
            return () => {
                destory(key);
            }
        }, [uuid]);
    }

    console.log('config panel => ', uuid);
    if(!uuid) return '';
    return <div className="c-properties-rect">
            <Row className="c-properties-rect-item">
                <Col cols={4}>
                    <Row>
                        背景
                    </Row>
                </Col>
                <Col cols={20}>
                    <ColorInput  />
                </Col>
            </Row>
            <Row className="c-properties-rect-item">
                <Col cols={12}>
                    <Row>
                        <Col className="c-label" cols={8}>长</Col>
                        <Col cols={16}>
                            <TextInput value={data.width} onFinished={v => {
                                const { rect } = getData(uuid);
                                rect.width = v * 1;
                                updateData(uuid, 'rect', rect);
                                envoke(`${uuid}-chart`, 'onResize', getData(uuid).rect);
                            }} />
                        </Col>
                    </Row>
                </Col>
                <Col cols={12}>
                    <Row>
                        <Col className="c-label" cols={8}>宽</Col>
                        <Col cols={16}>
                            <TextInput value={data.height} onFinished={v => {
                                const { rect } = getData(uuid);
                                rect.height = v * 1;
                                updateData(uuid, 'rect', rect);
                                envoke(`${uuid}-chart`, 'onResize', getData(uuid).rect);
                            }} />
                        </Col>
                    </Row>
                </Col>
            </Row>
            <Row className="c-properties-rect-item">
                <Col cols={12}>
                    <Row>
                        <Col className="c-label" cols={8}>左</Col>
                        <Col cols={16}>
                            <TextInput value={data.left < 0 ? 0 : data.left} onFinished={v => {
                                const { rect } = getData(uuid);
                                rect.left = v * 1 < 0 ? 0 : v * 1;
                                updateData(uuid, 'rect', rect);
                                envoke(`${uuid}-chart`, 'onResize', getData(uuid).rect);
                            }} />
                        </Col>
                    </Row>
                </Col>
                <Col cols={12}>
                    <Row>
                        <Col className="c-label" cols={8}>高</Col>
                        <Col cols={16}>
                            <TextInput value={data.top < 0 ? 0 : data.top} onFinished={v => {
                                const { rect } = getData(uuid);
                                rect.top = v * 1 < 0 ? 0 : v * 1;
                                updateData(uuid, 'rect', rect);
                                envoke(`${uuid}-chart`, 'onResize', getData(uuid).rect);
                            }} />
                        </Col>
                    </Row>
                </Col>
            </Row>
        </div>
};